<template>
    <el-container>
        <el-header>
            <cli-title-student></cli-title-student>
        </el-header>
        <el-main>
            <div class="center" v-if="getData">
                <el-row>
                    <el-col span="7">
                        <el-aside>
                            <repository-owner :message="uid" style="width: 250px;height: 300px"></repository-owner>
                        </el-aside>
                    </el-col>
                    <el-col span="17">
                        <div>
                            <el-row v-for="item in repository">
                                <el-card class="box-card" @click.native="toRepositoryContext(item.content_id)">
                                    <p class="context">
                                        {{item.content}}
                                    </p>
                                </el-card>
                            </el-row>
                            <el-row>
                                <el-pagination
                                        layout="prev, pager, next"
                                        :total="1000">
                                </el-pagination>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <el-footer>
            <page-footer></page-footer>
        </el-footer>
    </el-container>
</template>

<script>

    import CliTitleStudent from "../../../components/base/cliTitleStudent";
    import CliMenu from "../../../components/base/cliMenu";
    import RepositoryOwner from "../../../components/info/repositoryOwner";
    import pageFooter from "../../../components/base/pageFooter";
    import POST from "../../../api/POST";

    export default {
        name: "repository",
        components: {pageFooter, RepositoryOwner, CliMenu, CliTitleStudent},
        methods: {
            toRepositoryContext(cid) {
                console.log("!!!!!!!!");
                this.$router.push({
                    name: 'repository-cid-repositorycontext',
                    params: {cid: this.cid, uid: this.uid, contentid: cid}
                });
            },
        },
        data() {
            return {
                cid: '',
                uid: '',
                repository: [],
                getData: false,
            }
        }, mounted() {
            this.uid = this.$route.params.uid;
            this.cid = this.$route.params.cid;
            let data = {'id': this.uid, 'collectbox_id': this.cid};
            POST.showCollectboxContent(data).then(res => {
                this.repository = res.content;
                this.getData = true;
            });
        }

    }
</script>

<style scoped>
    .center {
        width: 1000px;
        margin: 50px auto;
    }

    .box-card {
        margin-top: 20px;
        height: 150px;
        width: 150px;
    }
</style>
